import { Button, Form, Input, Spin,message } from "antd";
import { FormComponentProps } from "antd/es/form";
import * as React from "react";
import { FormEvent } from "react";
import { RouteComponentProps, withRouter } from "react-router";
import { loginIn } from "../../axios/RequestUser";
import { getUrl } from "../../utils/AppData";
import {  loginStorage } from "../../utils/auth";

const FormItem = Form.Item;

interface Istates {
  login: boolean;
}

interface Iprops extends FormComponentProps, RouteComponentProps {}

class Field extends React.Component<Iprops, Istates> {
  constructor(props: Iprops) {
    super(props);
    this.state = { login: false };
  }

  public handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    this.props.form.validateFields(() => {
      loginIn(this.props.form.getFieldsValue()).then(value => {
        loginStorage(value.data.phone, value.data);
        if (getUrl() !== "/login") {
          this.props.history.push(getUrl());
        } else {
          this.props.history.push("/");
        }
      });
    });
  };

  public render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Spin tip="自动登录中..." spinning={this.state.login}>
          <Form
            onSubmit={this.handleSubmit}
            className="login-form"
            layout="horizontal"
          >
            <FormItem
              label="手机号码"
              labelCol={{ span: 5, offset: 1 }}
              wrapperCol={{ span: 15 }}
            >
              {getFieldDecorator("phone", {
                rules: [{ required: true, message: "登录名不能为空" }]
              })(<Input placeholder={"请输入您的手机号"} />)}
            </FormItem>
            <FormItem
              label="密码"
              labelCol={{ span: 5, offset: 1 }}
              wrapperCol={{ span: 15 }}
            >
              {getFieldDecorator("password", {
                rules: [{ required: true, message: "密码不能为空" }]
              })(
                <Input
                  type="password"
                  placeholder={"请输入长度为6-20位的密码"}
                />
              )}
              <Button
                type="primary"
                htmlType="submit"
                block={true}
                style={{ marginTop: 20 }}
              >
                {"登录"}
              </Button>
            </FormItem>
            {/*<FormItem label="验证码" labelCol={{span: 5,offset:1}} wrapperCol={{span: 6}} style={{position:"relative"}}>*/}
            {/*{getFieldDecorator("verificationCode", {*/}
            {/*rules: [{required: true, message: "验证码不能为空"}]*/}
            {/*})(*/}
            {/*<Input type="text" placeholder={"请输入验证码"} />*/}
            {/*)}*/}
            {/*/!*<img src={} style={{width:""}}/>*!/*/}
            {/*<div className="yzCode" >*/}
            {/*<img src="" alt="验证码"/>*/}
            {/*</div>*/}
            {/*</FormItem>*/}
            <FormItem>
              <p style={{ float: "right", marginRight: "10%" }}>
                <a href="javascript:void(0)" onClick={()=>{message.warning("假的，还没弄")}}>忘记密码?</a>
              </p>
            </FormItem>
          </Form>
        </Spin>
      </div>
    );
  }
}

export default withRouter(Form.create()(Field));
